<template>
    <div class="driver-info">
        <img src="../assets/avatar.png" class="driver-avatar"/>
        <div class="driver-content">
            <p class="driver-name">{{info.owner}}</p>
            <p class="car-info">{{info.carbrand}} {{info.carno}}</p>
            <div class="stars">
                <van-rate :size="18" v-model="info.totalincom" :readonly="true"></van-rate>
            </div>
        </div>
        <div class="btn-tel" @click="telClick()">
            <i class="iconfont icon-dianhua"></i>
        </div>
    </div>
</template>

<script>
    /* eslint-disable no-console,no-unused-vars */


    import api from '../net/api';
    import url from '../net/url';

    export default {
        name: "DriverInfo",
        props: {
            driverId: {
                default: ""
            }
        },
        data() {
            return {
                info: {}
            }
        },
        watch: {
            'driverId': function (val1, val2) {
                this.loadDriverInfo();
            }
        },
        methods: {
            telClick(){
               window.location.href = "tel:"+this.info.tel
            },
            loadDriverInfo() {
                api.get(url.GET_DRIVER_INFO, {driverid: this.driverId}).then(res => {
                    console.log(res)
                    this.info = res.data[0]
                }).catch(error => {
                    console.log(error)
                })
            }
        },
        mounted() {

        }
    }
</script>

<style scoped lang="less">
    .driver-info {
        width: calc(100% - 32px);
        height: 100px;
        background: #fff;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        box-shadow: #f0f0f0 2px 2px 2px;
        .driver-avatar {
            margin-left: 16px;
            width: 64px;
            height: 64px;
            border-radius: 50%;
            border: solid 1px #f0f0f0;
        }
        .driver-content {
            display: flex;
            flex: 1;
            flex-direction: column;
            margin-left: 8px;
            .driver-name {
                margin-top: 0;
                font-size: 14px;
                color: #25a3ff;
                margin-bottom: 2px;
            }
            .car-info {
                margin-top: 0;
                margin-bottom: 0;
                font-size: 14px;
                color: #444;
            }
            .stars {
                height: 24px;
            }
        }
        .btn-tel {
            width: 40px;
            height: 40px;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            .iconfont {
                font-size: 44px;
                color: #25a3ff;
            }
        }

    }


</style>